import React from 'react'
import classNames from 'classnames'

import { Button } from '@tarojs/components'
import './index.scss'

interface ICButton {
  width?: number
  height?: number
  color?: string | React.CSSProperties
  bgColor?: string | React.CSSProperties
  margin?: { top?: number; right?: number; bottom?: number; left?: number }
  position?: boolean
  fixed?: boolean
  borderColor?: string
  disabled?: boolean
  loading?: boolean
  onClick?: (() => any) | undefined
  [key: string]: any
}

/**
 *共用 CButton 按钮
 * @param width  按钮 宽度 默认 0
 * @param height  按钮 高度 默认 0
 * @param color  按钮 字体 颜色 默认 #fff
 * @param bgColor  按钮 背景色 默认 #5266a2
 * @param margin  按钮 控制 上右下左间距  默认 null
 * @param position  按钮 是否 固定到屏幕底部 默认 false
 * @param fixed  按钮 是否 固定到屏幕底部 默认 false
 * @param borderColor  按钮 是否 默认 #5266a2
 * @param disabled  按钮 是否 禁用 默认 false
 * @param loading  按钮 是否 加载中 默认 false
 * @event onClick 按钮 单击事件
 */
export default function CButton(params: ICButton) {
  const {
    width = 0,
    height = 0,
    color = '#fff',
    bgColor = '#5266a2',
    borderColor = '#5266a2',
    margin = null,
    position = false,
    fixed = false,
    disabled = false,
    loading = false,
    onClick = null,
  } = params

  return (
    <Button
      loading={loading}
      type='warn'
      className={classNames([
        'c_button',
        width && `c_button-width-${width}`,
        height && `c_button-height-${height}`,
        margin && margin.left && `c_button-margin-left-${margin.left}`,
        margin && margin.right && `c_button-margin-right-${margin.right}`,
        margin && margin.top && `c_button-margin-top-${margin.top}`,
        position && `c_button-position`,
        fixed && `c_button-fixed`,
        disabled && `c_button-disabled`,
      ])}
      style={`color:${color};background-color:${bgColor};border-color:${borderColor};`}
      onClick={(e) => {
        e.preventDefault()
        e.stopPropagation()
        onClick && onClick()
      }}
    >
      {params.children}
    </Button>
  )
}
